<%@ page language="java" import="cn.waqwb.connDB,java.util.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
    ArrayList<String[]> list = connDB.index();
%>
<html>
<head>
    <title>Echarts SuperMarket</title>
    <link href="css/style.css" type="text/css" rel="stylesheet">
    <link rel="shortcut icon" href="#">
    <script src="js/echarts.min.js"></script>
    <script src="js/style/macarons.js"></script>
    <script src="js/style/roma.js"></script>
    <script src="js/style/vintage.js"></script>
</head>
<body>
<div class="content">
    <div class="nav">
        <ul>
            <li class="current"><a href="#">总商品品类成交量对比</a></li>
            <li><a href="./SMindex1.jsp">饮品成交量对比</a></li>
            <li><a href="./SMindex2.jsp">各省会员人数</a></li>
            <li><a href="./SMindex3.jsp">男女购买商品对比</a></li>
            <li><a href="./SMindex4.jsp">商品购买关系</a></li>
        </ul>
    </div>
    <div class="container">
        <div class="title">超市所有商品成交量对比</div>
        <div class="show">
            <div class='chart-type'>饼图</div>
            <div id="main"></div>
        </div>
    </div>
</div>
<script>
    // 基于准备好的 DOM，初始化 ECharts 实例。
    // document.getElementById('main') 用于获取页面中 id 为 "main" 的 DOM 元素，
    // 'light' 是指定的主题名称，这里使用了 ECharts 的浅色主题。
    var myChart = echarts.init(document.getElementById('main'), 'light');

    // 指定图表的配置项和数据
    var option = {
        // 图表标题配置
        title: {
            // 标题文本内容
            text: '超市所有商品成交量对比',
            // 标题水平位置设置为居中
            left: 'center',
            // 标题距离顶部的距离为 20 像素
            top: 20,
            textStyle: {
                // 这里原本设置颜色的代码被注释掉了，可根据需要设置标题文本颜色，如 color: '#ccc'
            }
        },

        // 提示框配置
        tooltip: {
            // 触发类型为 'item'，表示鼠标悬停在图表的某个数据项上时触发提示框
            trigger: 'item',
            // 提示框的格式化函数，用于定义提示框的显示内容
            // {a} 表示系列名称，{b} 表示数据项名称，{c} 表示数据项的值，{d} 表示数据项的百分比
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },

        // 视觉映射组件配置
        visualMap: {
            // 不显示视觉映射组件
            show: false,
            // 数据最小值
            min: 80,
            // 数据最大值
            max: 600,
            inRange: {
                // 这里原本设置颜色亮度范围的代码被注释掉了，可根据需要设置，如 colorLightness: [0, 1]
            }
        },
        // 图表系列配置
        series: [
            {
                // 系列名称
                name: 'Products in the Supermarket',
                // 图表类型为饼图
                type: 'pie',
                // 饼图半径为 50%
                radius: '50%',
                // 饼图中心位置，水平和垂直方向都为 50%（即居中）
                center: ['50%', '50%'],
                // 数据数组，每个对象包含一个数据项的值（成交量）和名称（商品分类）
                // 这里使用了 JSP 表达式，从名为 list 的对象中获取数据，实际运行时会被替换为具体的值
                data: [
                    { value: <%=list.get(0)[1]%>, name: '<%=list.get(0)[0]%>' },
                    { value: <%=list.get(1)[1]%>, name: '<%=list.get(1)[0]%>' },
                    { value: <%=list.get(2)[1]%>, name: '<%=list.get(2)[0]%>' },
                    { value: <%=list.get(3)[1]%>, name: '<%=list.get(3)[0]%>' },
                    { value: <%=list.get(4)[1]%>, name: '<%=list.get(4)[0]%>' },
                    { value: <%=list.get(5)[1]%>, name: '<%=list.get(5)[0]%>' },
                    { value: <%=list.get(6)[1]%>, name: '<%=list.get(6)[0]%>' },
                    { value: <%=list.get(7)[1]%>, name: '<%=list.get(7)[0]%>' },
                    { value: <%=list.get(8)[1]%>, name: '<%=list.get(8)[0]%>' },
                    { value: <%=list.get(9)[1]%>, name: '<%=list.get(9)[0]%>' },
                    { value: <%=list.get(10)[1]%>, name: '<%=list.get(10)[0]%>' }
                ].sort(function (a, b) {
                    // 对数据数组进行排序，按照值从小到大排序
                    return a.value - b.value;
                }),
                // 玫瑰图类型为 'angle'，即扇形的角度表示数据大小
                roseType: 'angle',
                // 数据标签引导线配置
                labelLine: {
                    normal: {
                        // 引导线的平滑度为 0.2
                        smooth: 0.2,
                        // 引导线第一段长度为 10 像素
                        length: 10,
                        // 引导线第二段长度为 20 像素
                        length2: 20
                    }
                },
                // 数据项样式配置
                itemStyle: {
                    // 数据项的边框圆角半径为 11 像素
                    borderRadius: 11,
                    normal: {
                        // 这里原本设置颜色、阴影模糊和阴影颜色的代码被注释掉了，可根据需要设置，如 color: '#c23531', shadowBlur: 200, shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },

                // 动画类型为'scale'，即缩放动画
                animationType:'scale',
                // 动画缓动效果为 'elasticOut'，即弹性缓出效果
                animationEasing: 'elasticOut',
                // 动画延迟函数，根据索引生成随机的延迟时间
                animationDelay: function (idx) {
                    return Math.random() * 200;
                }
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    // 当 option 存在时，调用 myChart 的 setOption 方法设置图表配置
    option && myChart.setOption(option);
</script>
</body>
</html>
